<template>
    <div class="song-list">
        <play-all :songs="songs" v-show="songs.length && needPlayAll"></play-all>
        <ul>
            <li class="item"
                v-for="(song, index) in songs" :key="index"
                @click="selectItem(song, index)"
            >
                <div class="content">
                    <div class="rank" v-show="rank">
                        <span class="num">{{index + 1}}</span>
                    </div>
                    <div class="text">
                        <h2 class="name">{{song.name}}</h2>
                        <p class="desc" >
                            <span class="sq">SQ</span>
                            {{getDesc(song)}}
                        </p>
                    </div>
                    <div class="icon" @click.stop="clickIcon(song)">
                        <i class="iconfont icon-ellipsis-c"></i>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script type="text/ecmascript-6">
    import PlayAll from 'components/play-all/play-all'
    export default {
        name: 'song-list',
        props: {
            songs: {
                type: Array,
                default: () => {
                    return []
                }
            },
            rank: {
                type: Boolean,
                default: true
            },
            needPlayAll: {
                type: Boolean,
                default: true
            }
        },
        methods: {
            getDesc(song) {
                return `${song.singer} · ${song.album}`
            },
            selectItem(item, index) {
                this.$emit('select', item, index)
            },
            clickIcon(song) {
                this.$emit('clickIcon', song)
            }
        },
        components: {
            PlayAll
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"

    .song-list
        .item
            box-sizing: border-box
            height: 64px
            padding: 0 20px
            .content
                position: relative
                flex: 1
                display: flex
                line-height: 20px
                overflow: hidden
                align-items: center
                .rank
                    flex: 0 0 15px
                    margin-right: 25px
                    width: 25px
                    text-align: center
                    .num
                        color: $color-text
                        font-size: $font-size-large
                .text
                    flex: 1
                    display: block
                    overflow: hidden
                    .name
                        no-wrap()
                        font-size: $font-size-medium
                        color: $color-text
                    .desc
                        no-wrap()
                        margin-top: 4px
                        font-size: $font-size-medium
                        color: $color-text-d
                        .sq
                            position: relative
                            top: -2px
                            display: inline-block
                            padding: 3px 2px 0
                            line-height: 9px
                            color: $color-theme
                            border: .5px solid $color-theme
                            border-radius: 3px
                            font-size: $font-size-small-s
                .icon
                    flex: 0 0 15px
                    display: block
                    margin: auto 0
                    text-align: right
                    font-size: $font-size-large
                    color: $color-text-ld
                    extend-click()
</style>